<!-- 逻辑封装，required('@/components/drawer/index.vue') -->
<script setup lang="ts">
import drawer from '@/components/drawer/index.vue'
import pagination from '@/components/pagination/index.vue'
import tableOne from '@/components/DataTable/index1.vue'
import tableTwo from '@/components/DataTable/index2.vue'
import tableThree from '@/components/DataTable/index3.vue'
import pageTableOne from '@/components/PageTable/index1.vue'
import pageTableTwo from '@/components/PageTable/index2.vue'
import type { ILogicDrawer } from './logic-drawer';
import { ContentEnum } from './logic-drawer';
import type { IDrawer, ITableObj, ITableProp } from '@/type/interfaces';
const drawerRef = ref<InstanceType<typeof drawer>>()
const drawerConfig = ref<IDrawer>({})
const logicDrawer = ref<ILogicDrawer>({
    title: ContentEnum.TABLE1,
    content: ContentEnum.TABLE1
})

const tableProp = ref<ITableProp>({
    width: '600px'
    , actionWidth: '200px'
})
const tableObj = ref<ITableObj>({
    data: []
    , columnConfig: [
        {
            prop: 'id'
            , name: 'level'
            , width: 400
        }
        , {
            prop: 'name'
            , name: '名词'
        }
        , {
            prop: 'publication'
            , name: '出版'
        }
        , {
            prop: 'bookName'
            , name: '签名'
        }
    ]
})
const handleEdit = (index: number, row: any) => {
    console.log('handleEdit', index, row);
}
const handleDelete = (index: number, row: any) => {
    console.log('handleDelete', index, row);
}
const initTableConfig = () => {
    if (tableObj.value.data && tableObj.value.data.length) {
        return;
    }
    for (let i = 0; i < 2; i++) {
        tableObj.value.data.push({
            id: i
            , name: 'name-' + i
            , publication: 'publication-' + i
            , bookName: 'book-name-' + i
        })
    }
}
const open = (logicDrawerReq: ILogicDrawer) => {//打开抽屉
    drawerConfig.value.title = logicDrawerReq.title
    Object.assign(logicDrawer.value, logicDrawerReq)

    initTableConfig()
    drawerRef.value?.open()
}
defineExpose({
    open
})


</script>
<template>
    <drawer :drawer="drawerConfig" ref="drawerRef">
        <template #body>
            <pagination v-show="ContentEnum.PAGINATION === logicDrawer?.content" />
            <table-one :table-obj="tableObj" :table-prop="tableProp" v-show="ContentEnum.TABLE1 === logicDrawer?.content" />
            <table-two :table-obj="tableObj" v-show="ContentEnum.TABLE2 === logicDrawer?.content">
                <template #action="{ index, row }">
                    <div class="w-200px">
                        <el-button size="mini" @click="handleEdit(index, row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(index, row)">删除</el-button>
                    </div>
                </template>
            </table-two>
            <table-three :table-obj="tableObj" v-show="ContentEnum.TABLE3 === logicDrawer?.content">
                <template #name>
                    <div class="text-blue-700 font-bold text-30px">自定义内容</div>
                </template>
            </table-three>
            <page-table-one v-show="ContentEnum.PAGE_TABLE_1 === logicDrawer?.content"></page-table-one>
            <page-table-two v-show="ContentEnum.PAGE_TABLE_2 === logicDrawer?.content"></page-table-two>
        </template>
    </drawer>
</template>